<template>
  <div>
    <div class="branchStoreModel">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="el-icon-lx-cascades"></i> 原厂商品管理
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="handle-box">
          <el-button
            type="primary"
            icon="el-icon-edit-outline"
            class="white liner"
            @click="handleAdd"
            >创建商品出库</el-button
          >

          <el-button
            type="primary"
            class="search-input liner"
            icon="el-icon-search"
            @click="startSearch"
            >搜索</el-button
          >
          <el-input
            placeholder="在此输入您要搜索的内容"
            class="handle-input mr10"
            v-model="search"
          ></el-input>
        </div>

        <!--table表格-->
        <el-table
          :data="list"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
          style="display: block"
        >
          <el-table-column
            type="selection"
            width="35"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="headquartersCode"
            label="总部编码"
            width="60"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="headquartersName"
            label="总部名称"
            width="78"
          ></el-table-column>
          <el-table-column
            prop="area"
            label="区域"
            width="50"
          ></el-table-column>
          <!--        <el-table-column prop="storeStatus" label="门店状态"></el-table-column>-->
          <el-table-column label="状态" align="center" width="80">
            <template slot-scope="scope">
              <el-tag
                :type="
                  scope.row.storeStatus === '营业中'
                    ? 'success'
                    : scope.row.storeStatus === '暂停营业'
                    ? 'danger'
                    : ''
                "
                >{{ scope.row.storeStatus }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="contacts"
            label="联系人"
            width="64"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="电话"
            width="65"
          ></el-table-column>
          <el-table-column prop="fax" label="传真" width="85"></el-table-column>
          <el-table-column
            prop="province"
            label="省份"
            width="52"
          ></el-table-column>
          <el-table-column
            prop="city"
            label="城市"
            width="52"
          ></el-table-column>
          <el-table-column
            prop="town"
            label="区/镇"
            width="64"
          ></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>

          <el-table-column label="操作" width="220" align="center">
            <template slot-scope="scope">
              <!--编辑按钮-->
              <el-button
                type="text"
                icon="el-icon-edit"
                class="green"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >

              <!--删除按钮-->
              <el-button
                type="text"
                icon="el-icon-delete"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!--页码-->
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </div>

      <!-- 添加弹出框 -->
      <el-dialog title="提交" :visible.sync="addVisible" width="50%">
        <el-form ref="form" :model="addForm" label-width="70px">
          <el-form-item label="总部编码">
            <el-input v-model="addForm.headquartersCode"></el-input>
          </el-form-item>
          <el-form-item label="总部名称">
            <el-input v-model="addForm.headquartersName"></el-input>
          </el-form-item>
          <el-form-item label="区域">
            <el-input v-model="addForm.area"></el-input>
          </el-form-item>
          <el-form-item label="门店状态">
            <el-input v-model="addForm.storeStatus"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="addForm.contacts"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="addForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="传真">
            <el-input v-model="addForm.fax"></el-input>
          </el-form-item>
          <el-form-item label="省份">
            <el-input v-model="addForm.province"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="addForm.city"></el-input>
          </el-form-item>
          <el-form-item label="区/镇">
            <el-input v-model="addForm.town"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="addForm.address"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveAdd" class="liner"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 编辑弹出框 -->
      <el-dialog title="提交" :visible.sync="editVisible" width="50%">
        <el-form ref="form" :model="editForm" label-width="70px">
          <el-form-item label="总部编码">
            <el-input
              v-model="editForm.headquartersCode"
              readonly="readonly"
              class="headquartersCode"
            ></el-input>
          </el-form-item>
          <el-form-item label="总部名称">
            <el-input v-model="editForm.headquartersName"></el-input>
          </el-form-item>
          <el-form-item label="区域">
            <el-input v-model="editForm.area"></el-input>
          </el-form-item>
          <el-form-item label="门店状态">
            <el-input v-model="editForm.storeStatus"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="editForm.contacts"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="editForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="传真">
            <el-input v-model="editForm.fax"></el-input>
          </el-form-item>
          <el-form-item label="省份">
            <el-input v-model="editForm.province"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="editForm.city"></el-input>
          </el-form-item>
          <el-form-item label="区/镇">
            <el-input v-model="editForm.town"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="editForm.address"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit" class="liner"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
var _index;
export default {
  headquartersName: "basetable",
  data() {
    return {
      query: {
        headquartersCode: "",
        headquartersName: "",
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      addVisible: false,
      /*选项框公司总部*/
      optionCompany: "",

      addForm: [],
      editForm: [],
      search: "",
      searchList: [],
      pageTotal: 0,
      // form: {},
      idx: -1,
      id: -1,
      options: [
        {
          value: "headerQuarters",
          label: "公司总部",
          children: [
            {
              value: "wangjing",
              label: "望京分店"
            },
            {
              value: "jiulongshan",
              label: "九龙山店"
            },
            {
              value: "zhonglong",
              label: "中隆部门"
            },
            {
              value: "yonghegong",
              label: "雍和宫店"
            },
            {
              value: "dianshang",
              label: "电商部门"
            },
            {
              value: "zhixiao",
              label: "直销部门"
            }
          ]
        },
        {
          value: "ShangHai",
          label: "上海分公司"
        }
      ],
      baseForm: {
        name: "",
        date1: "",
        date2: "",
        delivery: true,
        type: ["公司总部"],
        resource: "上海分公司",
        desc: "",
        options: []
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      let res = {
        list: [
          {
            headquartersCode: "CDZB",
            headquartersName: "成都总部",
            area: "成都",
            storeStatus: "营业中",
            contacts: "秦子陵",
            phone: "20344203",
            fax: "519-851225379",
            province: "四川",
            city: "成都",
            town: "武侯区",
            address: "四川省成都市武侯区云华路333号"
          },
          {
            headquartersCode: "CQZB",
            headquartersName: "重庆总部",
            area: "重庆",
            storeStatus: "暂停营业",
            contacts: "风白羽",
            phone: "23648348",
            fax: "519-851225379",
            province: "重庆",
            city: "重庆",
            town: "南岸区",
            address: "重庆市南岸区融汇半岛香缇卡拉一期"
          },
          {
            headquartersCode: "HNZB",
            headquartersName: "湖南总部",
            area: "郴州",
            storeStatus: "营业中",
            contacts: "段三",
            phone: "9090990",
            fax: "519-851225379",
            province: "湖南",
            city: "郴州",
            town: "北湖区",
            address: "湖南省郴州市北湖区拥军路9号"
          }
        ],
        pageTotal: this.list.length
      };
      console.log(res);
      this.tableData = res.list;
      this.pageTotal = res.pageTotal || this.tableData.length;
    },
    /*公司总部内容*/
    headquartersClk: function(e) {
      console.log(e.target.getattribute("label"));
      alert("Hi");
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      console.log(row);
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$message.success("删除成功");
          this.tableData.splice(index, 1);
        })
        .catch(() => {});
    },

    /*选择框——已选择"公司总部"事件*/

    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      let str = "";
      this.delList = this.delList.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].headquartersName + " ";
      }
      this.$message.error(`删除了${str}`);
      this.multipleSelection = [];
    },

    /*编辑操作*/
    handleEdit(index, row) {
      this.editVisible = true;
      this.editForm = Object.assign({}, row); // 重置对象
      _index = index;
      console.log("index的值：" + index);
      console.log("_index的值：" + _index);
      console.log("row的值是：", this.editForm); // 代表选择的这一行的数据
    },
    /*保存编辑*/
    saveEdit() {
      var editData = _index;
      console.log("editData的值" + this.editForm);
      this.tableData[
        editData
      ].headquartersCode = this.editForm.headquartersCode;
      this.tableData[
        editData
      ].headquartersName = this.editForm.headquartersName;
      this.tableData[editData].area = this.editForm.area;
      this.tableData[editData].storeStatus = this.editForm.storeStatus;
      this.tableData[editData].contacts = this.editForm.contacts;
      this.tableData[editData].phone = this.editForm.phone;
      this.tableData[editData].fax = this.editForm.fax;
      this.tableData[editData].province = this.editForm.province;
      this.tableData[editData].city = this.editForm.city;
      this.tableData[editData].town = this.editForm.town;
      this.tableData[editData].address = this.editForm.address;
      this.editVisible = false;
      console.log("数据：" + this.editForm.date);
      console.log("对象数组", this.tableData);
    },

    //添加操作
    handleAdd() {
      this.addVisible = true;
      this.addForm = {
        headquartersCode: "",
        headquartersName: "",
        area: "",
        storeStatus: "",
        contacts: "",
        phone: "",
        fax: "",
        province: "",
        city: "",
        town: "",
        address: ""
      };
    },

    //保存添加
    saveAdd() {
      this.addVisible = false;
      this.$message.success(`添加成功`);
      this.tableData.push({
        headquartersCode: this.addForm.headquartersCode,
        headquartersName: this.addForm.headquartersName,
        storeStatus: this.addForm.storeStatus,
        contacts: this.addForm.contacts,
        phone: this.addForm.phone,
        fax: this.addForm.fax,
        province: this.addForm.province,
        city: this.addForm.city,
        town: this.addForm.town
      });
    },

    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    }
  },
  /*computed比methods效率高，不需要重新渲染页面*/
  computed: {
    // 计算属性（过滤） 查询功能
    list: function() {
      let arr = [];
      let _this = this;
      for (let i = 0; i < _this.tableData.length; i++) {
        console.log(_this.tableData.length);
        if (
          this.tableData[i].headquartersCode.indexOf(this.search) !== -1 ||
          this.tableData[i].headquartersName.indexOf(this.search) !== -1 ||
          this.tableData[i].area.indexOf(this.search) !== -1 ||
          this.tableData[i].storeStatus.indexOf(this.search) !== -1 ||
          this.tableData[i].contacts.indexOf(this.search) !== -1 ||
          this.tableData[i].phone.indexOf(this.search) !== -1 ||
          this.tableData[i].fax.indexOf(this.search) !== -1 ||
          this.tableData[i].province.indexOf(this.search) !== -1 ||
          this.tableData[i].city.indexOf(this.search) !== -1 ||
          this.tableData[i].town.indexOf(this.search) !== -1 ||
          this.tableData[i].address.indexOf(this.search) !== -1
        ) {
          arr.push(this.tableData[i]);
        }
      }
      return arr;
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.dropDown {
  margin-right: 10px;
}
.handle-select {
  width: 120px;
}

.handle-input {
  position: relative;
  left: 10px;
  width: 300px;
  display: inline-block;
}
.optionMenu {
  width: 260px;
  float: left;
  margin-right: 10px;
}
.search-input,
.handle-input {
  float: right;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.green {
  color: green;
  margin-right: 5px;
}
.blue {
  color: dodgerblue;
  margin-right: 5px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.page {
  float: right;
  margin: 10px 0;
}
.liner {
  background-image: linear-gradient(to bottom, #a1c4fd, #005bea);
}
</style>
